<template>
	<setting-item-box name="渲染器" :alone="true">
		<RendererSetting v-model="config.renderer" includeInherit />
	</setting-item-box>
	<collapse-item v-if="title" name="标题">
		<template #header>
			<n-switch v-model:value="title.show" size="small"></n-switch>
		</template>
		<setting-item-box name="标题">
			<setting-item name="颜色">
				<n-color-picker v-model:value="title.textStyle.color" size="small"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="title.textStyle.fontSize" :min="1" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="副标题">
			<setting-item name="颜色">
				<n-color-picker size="small" v-model:value="title.subtextStyle.color"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="title.subtextStyle.fontSize" :min="1" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
	</collapse-item>

	<collapse-item v-if="grid" name="容器">
		<setting-item-box name="距离">
			<setting-item name="左侧距离">
				<n-input v-model:value="grid.left" size="small"></n-input>
			</setting-item>
			<setting-item name="右侧距离">
				<n-input v-model:value="grid.right" size="small"></n-input>
			</setting-item>
			<setting-item name="上侧距离">
				<n-input v-model:value="grid.top" size="small"></n-input>
			</setting-item>
			<setting-item name="下侧距离">
				<n-input v-model:value="grid.bottom" size="small"></n-input>
			</setting-item>
		</setting-item-box>
	</collapse-item>

	<collapse-item v-if="xAxis" name="X轴">
		<template #header>
			<n-switch v-model:value="xAxis.show" size="small"></n-switch>
		</template>
		<setting-item-box name="单位">
			<setting-item name="名称">
				<n-input v-model:value="xAxis.name" size="small"></n-input>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker size="small" v-model:value="xAxis.nameTextStyle.color"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="xAxis.nameTextStyle.fontSize" :min="12" size="small"></n-input-number>
			</setting-item>
			<setting-item name="偏移量">
				<n-input-number v-model:value="xAxis.nameGap" :min="5" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="标签">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="xAxis.axisLabel.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker size="small" v-model:value="xAxis.axisLabel.color"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="xAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
			</setting-item>
			<setting-item name="偏移量">
				<n-input-number v-model:value="xAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="轴线">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="xAxis.axisLine.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker v-model:value="xAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
			</setting-item>
			<setting-item name="粗细">
				<n-input-number v-model:value="xAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
			</setting-item>
			<setting-item name="位置">
				<n-select v-model:value="xAxis.position" size="small" :options="axisConfig.xposition"></n-select>
			</setting-item>
			<setting-item name="对齐零">
				<n-space>
					<n-switch v-model:value="xAxis.axisLine.onZero" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="反向">
				<n-space>
					<n-switch v-model:value="xAxis.inverse" size="small"></n-switch>
				</n-space>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="刻度">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="长度">
				<n-input-number v-model:value="xAxis.axisTick.length" :min="1" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="分割线">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="xAxis.splitLine.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker v-model:value="xAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
			</setting-item>
			<setting-item name="粗细">
				<n-input-number v-model:value="xAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
			</setting-item>
			<setting-item name="类型">
				<n-select
					v-model:value="xAxis.splitLine.lineStyle.type"
					size="small"
					:options="axisConfig.splitLint.lineStyle.type"
				></n-select>
			</setting-item>
		</setting-item-box>
	</collapse-item>

	<collapse-item v-if="yAxis" name="Y轴">
		<template #header>
			<n-switch v-model:value="yAxis.show" size="small"></n-switch>
		</template>
		<setting-item-box name="单位">
			<setting-item name="名称">
				<n-input v-model:value="yAxis.name" size="small"></n-input>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker size="small" v-model:value="yAxis.nameTextStyle.color"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="yAxis.nameTextStyle.fontSize" :min="8" size="small"></n-input-number>
			</setting-item>
			<setting-item name="偏移量">
				<n-input-number v-model:value="yAxis.nameGap" :min="5" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="标签">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="yAxis.axisLabel.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker size="small" v-model:value="yAxis.axisLabel.color"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
			</setting-item>
			<setting-item name="偏移量">
				<n-input-number v-model:value="yAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="轴线">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker v-model:value="yAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
			</setting-item>
			<setting-item name="粗细">
				<n-input-number v-model:value="yAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
			</setting-item>
			<setting-item name="位置">
				<n-select v-model:value="yAxis.position" size="small" :options="axisConfig.yposition"></n-select>
			</setting-item>
			<setting-item name="对齐零">
				<n-space>
					<n-switch v-model:value="yAxis.axisLine.onZero" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="反向">
				<n-space>
					<n-switch v-model:value="yAxis.inverse" size="small"></n-switch>
				</n-space>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="刻度">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="长度">
				<n-input-number v-model:value="yAxis.axisTick.length" :min="1" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="分割线">
			<setting-item name="展示">
				<n-space>
					<n-switch v-model:value="yAxis.splitLine.show" size="small"></n-switch>
				</n-space>
			</setting-item>
			<setting-item name="颜色">
				<n-color-picker v-model:value="yAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
			</setting-item>
			<setting-item name="粗细">
				<n-input-number v-model:value="yAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
			</setting-item>
			<setting-item name="类型">
				<n-select
					v-model:value="yAxis.splitLine.lineStyle.type"
					size="small"
					:options="axisConfig.splitLint.lineStyle.type"
				></n-select>
			</setting-item>
		</setting-item-box>
	</collapse-item>

	<collapse-item v-if="legend" name="图例">
		<template #header>
			<n-switch v-model:value="legend.show" size="small"></n-switch>
		</template>
		<setting-item-box name="图例文字">
			<setting-item name="颜色">
				<n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
			</setting-item>
			<setting-item name="大小">
				<n-input-number v-model:value="legend.textStyle.fontSize" :min="1" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
		<setting-item-box name="图例位置">
			<setting-item name="x轴">
				<n-select v-model:value="legend.x" size="small" :options="legendConfig.lengendX" />
			</setting-item>
			<setting-item name="y轴">
				<n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
			</setting-item>
		</setting-item-box>
		<setting-item-box name="图例信息">
			<setting-item name="方向">
				<n-select v-model:value="legend.orient" size="small" :options="legendConfig.orient" />
			</setting-item>
			<setting-item name="形状">
				<n-select v-model:value="legend.icon" size="small" :options="legendConfig.shape" />
			</setting-item>
		</setting-item-box>
		<setting-item-box name="图例大小">
			<setting-item name="宽">
				<n-input-number v-model:value="legend.itemWidth" :min="1" size="small"></n-input-number>
			</setting-item>
			<setting-item name="高">
				<n-input-number v-model:value="legend.itemHeight" :min="1" size="small"></n-input-number>
			</setting-item>
		</setting-item-box>
	</collapse-item>
</template>

<script setup name="myEchartsSetting">
import { axisConfig, legendConfig } from '@/packages/config/echarts/index';

const props = defineProps({
	config: {
		type: Object,
		required: true
	}
});

const title = computed(() => props.config.title);

const xAxis = computed(() => props.config.xAxis);

const yAxis = computed(() => props.config.yAxis);

const legend = computed(() => props.config.legend);

const grid = computed(() => props.config.grid);

// 监听legend color颜色改变type = scroll的颜色
watch(
	() => legend.value && legend.value.textStyle.color,
	(newVal) => {
		if (legend.value && newVal) legend.value.pageTextStyle.color = newVal;
	},
	{ immediate: true, deep: true }
);
</script>
